<!--
 * @Author: lujiangbo knight_lujb@163.com
 * @Date: 2024-04-11 14:58:18
 * @LastEditors: lujiangbo knight_lujb@163.com
 * @LastEditTime: 2024-05-10 13:34:28
 * @FilePath: /character-test/src/pages/components/CustomNav/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <van-nav-bar :class="classData" title="" @click-left="onCustomLeftClick" :border="false">
        <template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
            <slot :name="name" v-bind="scope" :key="name"></slot>
        </template>
    </van-nav-bar>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { utils } from '@/utils/index.ts';
import { computed, onActivated, useAttrs } from 'vue';
const router = useRouter();
const attrs = useAttrs()
const classData = computed(() => {
    console.log(attrs);

    return { 'custom-nav': true, 'custom-nav-dark': attrs.theme !== 'light', 'custom-nav-light': attrs.theme === 'light', 'custom-nav-show': attrs['custom-show'] }
})
const goBack = () => utils.goBack(router)
onActivated(() => {
    document && (document.title = attrs['custom-title'] as string || '性格测试')
})
const onCustomLeftClick = () => {
    if (!attrs.onLeftClick) {
        return goBack()
    }
    typeof attrs.onLeftClick === 'function' ? attrs.onLeftClick(goBack) : null;
}
</script>

<style lang="scss" scoped></style>